<div class="da-header-notice">
  <d-tabs [type]="'tabs'" [(activeTab)]="tabActiveID">
    <d-tab id="notice" [title]="tabTitles.notice" tabId="notice">
      <ng-template dTabContent>
        <div class="da-notice-container">
          <div class="da-notice-content" *ngIf="messages.length; else noData">
            <div
              class="da-notice-item da-notice-container-item"
              *ngFor="let msg of messages"
              (click)="handleNoticeClick(msg, 'notice')"
              [ngClass]="{ 'da-notice-checked': msg.isRead.value != '0' }"
            >
              <div [class]="'da-notice-item-left da-notice-container-item-left success'">
                <em [class]="'icon icon-notice'"></em>
              </div>
              <div class="da-notice-item-right">
                <div class="da-notice-item-title da-notice-container-item-title">
                  {{ msg.title }}
                </div>
                <div class="da-notice-item-time da-notice-container-item-time">
                  {{ msg.createTime | date: 'yyyy-MM-dd HH:mm' }}
                </div>
              </div>
            </div>
          </div>
          <div class="da-notice-clear" [ngStyle]="{ visibility: messages.length ? 'visible' : 'hidden' }">
            <d-button bsStyle="text-dark" bsPosition="left" [width]="'160px'" (btnClick)="handleClean('notice')">
              {{ 'header.msg.clear' | translate }}
            </d-button>
            <span class="da-dividing-line"></span>
            <d-button bsStyle="text-dark" bsPosition="right" [width]="'160px'" (btnClick)="handleMore('notice')">{{
              'header.msg.more' | translate
            }}</d-button>
          </div>
        </div>
      </ng-template>
    </d-tab>
  </d-tabs>
</div>

<ng-template #noData>
  <div class="da-notice-no-data">
    <em class="icon icon-desk-notice"></em>
    <span>{{ 'header.msg.done' | translate }}</span>
  </div>
</ng-template>
